<template>
  <md-nav-bar title="" :bgInfo="{ url: 'https://cdn.xmxiaomai.com/isong_static/topList/Bitmap.png' }" />
  <view class="rank-container">
    <!-- 顶部渐变背景 -->
    <view class="rank-header">
      <view class="rank-tabs">
        <view
          v-for="(item, idx) in tabs"
          :key="idx"
          :class="['tab', tabIndex === idx ? 'active' : '']"
          @click="() => handleTab(idx)">
          {{ item }}
        </view>
        <button class="history-btn" @click="onToHistory">历史榜单</button>
        <view class="history-btn rank-rule">
          <md-agreement text="榜单规则"  hideSymbol color="white"/>
        </view>
      </view>
    </view>

    <!-- 榜单前三名 -->
    <view class="rank-top3">
      <template v-for="(item, index) in data.top3" :key="item.musicId">
        <view :class="['top3-item', 'floor_' + (index + 1)]" @click="onToMusicDetail(item)">
          <view class="top3-avatar-img">
            <image class="top3-avatar" :src="item?.avatar" mode="aspectFill" />

            <image class="top3-badge" :src="data.top3Icon[index]" />
          </view>

          <view class="top3-name">{{ item.musicName }}</view>
          <view class="top3-like">
            <text class="like-icon"></text>
            {{ item.totalScore }}
          </view>
        </view>
      </template>
    </view>

    <!-- 榜单列表 -->
    <view class="rank-list" v-if="data.rankList.length">
      <view v-for="item in data.rankList" :key="item.musicId" class="rank-list-item" @click="onToMusicDetail(item)">
        <view class="rank-badge">
          <view class="badge-num">{{ item.rankingScore }}</view>
        </view>
        <text class="rank-music"></text>
        <view class="rank-title">{{ item.musicName }}</view>
        <view class="rank-like">
          <text class="like-icon"></text>
          {{ item.totalScore }}
        </view>
      </view>
    </view>
    <view class="rank-date">统计时间 {{ data?.currentTime }}</view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// 接口
import api from '@/api';
import type { TopList } from '@/api/data';
// 工具
import { changeIndex0_1 } from '@/utils/util';
import { onLoad, onShow } from '@dcloudio/uni-app';

const data = reactive({
  // 榜单数据
  top3: [] as TopList.Top10.Data[], // 前 top3 榜单数据
  rankList: [] as TopList.Top10.Data[], // top4 ~ top10 榜单数据
  top3Icon: [
    'https://cdn.xmxiaomai.com/isong_static/topList/%E4%BD%8D%E5%9B%BE.png',
    'https://cdn.xmxiaomai.com/isong_static/topList/%E4%BD%8D%E5%9B%BE%281%29.png',
    'https://cdn.xmxiaomai.com/isong_static/topList/Group%2012.png',
  ], // top3 榜单图标
  currentTime: '', // 当前统计时间段
});

const tabs = ['周榜', '月榜', '季榜', '年榜'];
const tabIndex = ref(0);

// 跳转音乐详情
const onToMusicDetail = (obj: TopList.Top10.Data) => {
  uni.navigateTo({
    url: '/pages/sub/square/musicDetail?id=' + obj.musicId,
  });
};
// 打开历史榜单
const onToHistory = () => {
  uni.navigateTo({
    url: '/pages/sub/topList/history',
  });
};

const handleTab = (idx: number) => {
  tabIndex.value = idx;
  // 根据 tabIndex 获取对应的榜单数据
  fetchGetTop10(idx);
  fetchCurrentTime(idx);
};

/**
 * 接口相关
 */
// 获取top10榜单数据
const fetchGetTop10 = async (dateType: number) => {
  try {
    const res = await api.TopList.top10({
      dateType,
    });
    const list = res.data.slice();
    while (list.length < 3) {
      list.push({
        avatar: 'https://cdn.xmxiaomai.com/isong_static/music/music-default-avatar.png',
        musicId: -1,
        musicName: '虚位以待',
        rankingScore: list.length + 1,
        totalScore: 0,
      });
    }
    const top10 = changeIndex0_1(list || []);
    if (top10?.length >= 0) {
      // 取前三条单独处理
      data.top3 = top10.slice(0, 3);
      if (top10.length > 3) {
        data.rankList = top10.slice(3, 10);
      }
    }
  } catch (error) {
    data.top3 = [];
    data.rankList = [];
  }
};

// 获取当前统计时间段
const fetchGetCurrentTime = async () => {
  try {
    const res = await api.TopList.getCurrentTime({
      dateType: tabIndex.value,
    });
    data.currentTime = res.data;
  } catch (error) {
    data.currentTime = '';
  }
};

onLoad(() => {
  fetchGetCurrentTime();
});

onShow(() => {
  // 页面显示时获取榜单数据
  fetchGetTop10(tabIndex.value);
});
</script>

<style lang="scss" scoped>
.rank-container {
  min-height: 100vh;
  background: #e2e2e2;
  padding-bottom: 120rpx;
  margin-top: -330rpx;
}
.rank-header {
  background: linear-gradient(135deg, #1fa37a 0%, #0b5e4a 100%);
  padding: 64rpx 0 0 0;
  border-bottom-left-radius: 48rpx;
  border-bottom-right-radius: 48rpx;
}
.rank-tabs {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  margin-bottom: 0;
  position: relative;
}
.tab {
  font-size: 36rpx;
  color: #fff;
  font-weight: 600;
  margin-right: 48rpx;
  opacity: 0.7;
  position: relative;
  padding-bottom: 8rpx;
}
.tab.active {
  opacity: 1;
}
.tab.active::after {
  content: '';
  display: block;
  width: 37rpx;
  height: 13rpx;
  position: absolute;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/common/Stroke%201.png');
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  transform: translateX(-50%);
}
.history-btn {
  position: absolute;
  right: 0;
  top: 0;
  background: transparent;
  color: #ffffff;
  font-size: 24rpx;
  border-radius: 32rpx 0 0 32rpx;
  height: 56rpx;
  line-height: 48rpx;
  width: 130rpx;
  font-weight: 500;
  border: 1px solid #ffffff;
  padding: 4rpx 0;
}
.rank-rule {
  top: 75rpx;
  height: auto;
  width: auto;
  padding: 4rpx 14rpx;
}
.rank-top3 {
  display: flex;
  margin: 88rpx 34rpx 0;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/topList/%E7%BC%96%E7%BB%84%202.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 430rpx;
  position: relative;
  justify-content: space-around;
}
.top3-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
// 第一名
.floor_2 {
  z-index: 1;
  .top3-badge {
    width: 64rpx;
    height: 60rpx;
    position: absolute;
    left: 12rpx;
    top: -30rpx;
  }
  .top3-avatar-img {
    position: relative;
    width: 183rpx;
    height: 183rpx;
  }
  .top3-avatar {
    width: 183rpx;
    height: 183rpx;
    border-radius: 50%;
  }
}
// 第二名
.floor_1 {
  z-index: 2;
  padding-top: 72rpx;
  .top3-badge {
    width: 51.39rpx;
    height: 48.4rpx;
    position: absolute;
    left: -16rpx;
    top: -10rpx;
  }
  .top3-avatar-img {
    position: relative;
    width: 139rpx;
    height: 139rpx;
  }
}
// 第三名
.floor_3 {
  z-index: 1;
  padding-top: 72rpx;
  .top3-badge {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    left: -18rpx;
    top: -12rpx;
  }
  .top3-avatar-img {
    position: relative;
    width: 139rpx;
    height: 139rpx;
  }
}

.top3-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  border: 6rpx solid #fff;
  background: #eee;
  margin-bottom: 8rpx;
}
.top3-item.first .top3-avatar {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 8rpx;
}
.top3-crown {
  position: absolute;
  top: -32rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 64rpx;
  height: 64rpx;
}

.top3-name {
  font-size: 28rpx;
  color: #222;
  font-weight: 600;
  margin-bottom: 17rpx;
  margin-top: 10rpx;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170rpx;
}
.top3-like {
  width: 141rpx;
  height: 54rpx;
  background: linear-gradient(123deg, #f3b17b 0%, #ffe5cb 33%, #fee1c5 67%, #fedcbc 100%);
  box-shadow: inset 0rpx 2rpx 20rpx 0rpx #ffc375;
  border-radius: 27rpx;
  filter: blur(0px);
  font-weight: 600;
  font-size: 30rpx;
  color: #683723;
  line-height: 54rpx;
  display: flex;
  align-items: center;
  margin-bottom: 4rpx;
  justify-content: center;
}
.like-icon {
  margin-right: 8rpx;
  width: 20rpx;
  height: 18rpx;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/topList/%E8%B7%AF%E5%BE%84.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.rank-list {
  background: #fff;
  border-radius: 40rpx;
  margin: 0 41rpx;
}
.rank-list-item {
  display: flex;
  align-items: center;
  padding: 24rpx 24rpx 18rpx;
  height: 80rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.rank-list-item:last-child {
  border-bottom: none;
}
.rank-badge {
  width: 48rpx;
  height: 52rpx;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/topList/%E4%BD%8D%E5%9B%BE%282%29.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}
.badge-num {
  font-size: 26rpx;
  color: #ffffff;
  font-weight: 500;
}
.rank-music {
  width: 30rpx;
  height: 30rpx;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/topList/%E7%BC%96%E7%BB%84.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-right: 12rpx;
}
.rank-title {
  flex: 1;
  font-size: 30rpx;
  color: #2b2a2a;
  font-weight: 400;
  margin-right: 12rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-like {
  font-size: 26rpx;
  color: #2b2a2a;
  display: flex;
  align-items: center;
}
.rank-date {
  text-align: center;
  padding-right: 41rpx;
  margin-top: 41rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  color: #999;
}
</style>
